<template>
  <div>
    <div class="flex gap-2 items-center">
      <a-button type="text" @click="goGenHome">
        <left-outlined />
      </a-button>
      <a-divider :type="'vertical'"></a-divider>
      <h3 class="text-14">待导入列表</h3>
    </div>

    <a-flex class="my-12" :gap="12" justify="space-between">
      <a-flex :gap="4">
        <a-button :loading="dbTable.loading" @click="dbList">
          <SyncOutlined />
        </a-button>
        <div>
          <a-input-search
            placeholder="请输入表名"
            v-model:value="dbTable.query.tableName"
            @search="dbList"
            enter-button
            allow-clear
          ></a-input-search>
        </div>
      </a-flex>
      <a-button type="primary" :disabled="dbTable.keys.length === 0" @click="importDb()">
        批量导入
      </a-button>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { SyncOutlined } from '@ant-design/icons-vue';
import { goGenHome } from '../../column/data/curd';
import { dbList, importDb } from '../data/curd';
import { dbTable } from '../data/table';
</script>

<style lang="scss" scoped></style>
